<template>
  <div class="f-r-s-c">
    <span class="title">{{ title }}</span>
    <div class="f-r-s-c">
      <span
        :class="['datetab', currentTabIndex == 7 ? 'active' : '']"
        @click="switchTab(7)"
        >近7天</span
      >
      <span
        :class="['datetab', currentTabIndex == 30 ? 'active' : '']"
        @click="switchTab(30)"
        >近30天</span
      >
      <span
        :class="['datetab', currentTabIndex == 100 ? 'active' : '']"
        @click="switchTab(100)"
        >{{ rangDateDes }}</span
      >
    </div>

    <van-calendar
      v-model:show="show"
      type="range"
      color="#fdd000"
      @confirm="onConfirm"
      :min-date="minDate"
      :max-date="maxDate"
    />
  </div>
</template>

<script>
import { onMounted, ref, watch } from "vue";
import dayjs from "dayjs";
export default {
  name: "DateFilterTab",
  components: {},
  props: {
    title: String,
    defaultRange: {
      type: Number,
      default: 7,
    },
  },
  setup(props, { emit }) {
    const dateFmt = "YYYY-MM-DD";
    let show = ref(false);
    let currentTabIndex = ref(7);
    let selDateRange = ref([]);
    let rangDateDes = ref("");
    let dateRangeMap = {
      7: [
        dayjs().subtract(7, "day").format(dateFmt),
        dayjs().subtract(1, "day").format(dateFmt),
      ], //近7天，不包括当天
      30: [
        dayjs().subtract(30, "day").format(dateFmt),
        dayjs().subtract(1, "day").format(dateFmt),
      ], //近30天，不包括当天
    };

    function switchTab(tabIndex) {
      currentTabIndex.value = tabIndex;
      if (tabIndex != 100) {
        selDateRange.value = dateRangeMap[tabIndex];
        // emit("ondatechange", selDateRange.value);//点击就加载
      } else {
        show.value = true;
      }
    }

    const formatDate = (date) => `${date.getMonth() + 1}-${date.getDate()}`;
    function onConfirm(values) {
      const [start, end] = values;
      show.value = false;
      selDateRange.value = [
        dayjs(start).format(dateFmt),
        dayjs(end).format(dateFmt),
      ];
      rangDateDes.value = `${formatDate(start)} ~ ${formatDate(end)}`;
    }

    watch(selDateRange, (val, preVal) => {
      if (val != preVal) {
        rangDateDes.value = `${dayjs(val[0]).format("MM-DD")} ~ ${dayjs(
          val[1]
        ).format("MM-DD")}`;
        emit("ondatechange", val); //变化才加载
      }
    });

    onMounted(() => {
      switchTab(props.defaultRange);
    });

    return {
      show,
      switchTab,
      onConfirm,
      rangDateDes,
      selDateRange,
      currentTabIndex,
      minDate: new Date(2021, 1, 1),
      maxDate: new Date(),
    };
  },
};
</script>
<style lang="less" scoped>
.title {
  white-space: nowrap;
  font-size: 14px;
  width: 56px;
}
.datetab {
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  color: #999999;
  border: solid 1px #999999;
  padding: 4px 10px;
  margin-left: 15px;

  &.active {
    background-color: #fdd000;
    border-color: transparent;
    color: #000;
    font-weight: 500;
  }
}
</style>